<template>
        <ul>
            <li v-for="(item,index) in listener" @click="redic(index)" :key="index" :class="{bgWhite:index==liIndex,bgRed:index!=liIndex}">
				<a href="javascript:;"  :class="{colorRed:index==liIndex,colorWhite:index!=liIndex}">{{item[0]}}</a>
			</li>
        </ul>
</template>
<script>
// 热销媒体组件的导航
export default {
	data(){
		return {
			variable:["shortVideo","redBook","kola","wechat","dav"],
			listener:[
				["短视频"],
				["小红书号"],
				["网易考拉海购号"],
				["微信公众号"],
				["微博大V号"]
			],
			liIndex:0
		}
	},
	methods:{
		redic(index){
			this.$emit("showShortVideo",this.variable[index])
			this.liIndex = index
		}
	}
};
</script>
<style scoped>
ul{
	overflow: hidden;
}
ul li{
	float: left;
	width: 152px;
	height: 38px;
	text-align: center;
	line-height: 38px;
	background-color: #EE4041;
}
ul li a{
	font-size: 16px;
}
.colorRed{
	color:#EE4041;
}
.colorWhite{
	color:#fff;
}
.bgWhite{
	background: #fff;
}
.bgRed{
	background: #EE4041;
	border-right:1px solid #fff;
}

</style>


